<template>
	<div class="home">
		<!-- 轮播区域 -->
		<div class="banner">
			<el-carousel :interval="5000" arrow="always" height="10rem">
				<el-carousel-item v-for="(item,index) in HotBanner" :key="item.id">
					<img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<MobileHomeList proptitle="热门推荐"></MobileHomeList>
		<MobileHomeList proptitle="新书上市" style="padding-bottom: 2rem;"></MobileHomeList>
	</div>
</template>

<script>
	import MobileHomeList from '@/components/mobile/home/MobileHomeList.vue';
	export default {
		name: 'MobileHome',
		components: {
			MobileHomeList
		},
		data() {
			return {
				bannerlist: []
			}
		},
		mounted() {
			this.$axios.get("/api/public/findHot/1/99").then(res => {
				this.bannerlist = res.data.data
			})
		},
		computed: {
			HotBanner() {
				this.bannerlist.sort((a1, a2) => {
					return a2.hot - a1.hot
				})
				// forEach/for...in/for...of :都是可以在需要限制输出的数据模块使用
				// map 基本确定不会更新数组的长度 只不过数据的内容发生格式化的改变
				let arr = [];
				for (let i = 0; i < this.bannerlist.length; i++) {
					if (i < 4) {
						arr.push(this.bannerlist[i])
					}
				}
				return arr;
			}
		}
	}
</script>

<style scoped>
	.home {
		background-color: #f5d5a0;
		position: relative;
		top: 3.5rem;
	}

	.home .banner {
		width: 100%;
		height: 10rem;
		background-color: orange;
		margin-bottom: 1rem;
	}

	.home .banner img {
		width: 100%;
		height: 100%;
	}

	/* 穿刺 :css用于修改固定组件样式的操作 */
	.home .banner .el-carousel /deep/ .el-carousel_button {
		height: 5px !important;
	}

	.home .banner .el-carousel /deep/ .is-active .el-carousel_button {
		background-color: #a68b5b !important;
	}
</style>